
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
	 	/*
			阴影：
				1) shadowOffsetX和shadowOffsetX
				2) shadowColor（这两个需要一起配合,因为阴影的颜色默认黑色透明）

			高斯模糊值
				shadowBlur = 数值
	 	*/

	 	oGC.font = '60px impact';		//带px
	 	oGC.textBaseline = 'middle';		//line不是大写

	 	var w = oGC.measureText('妙味课堂').width;

	 	oGC.shadowOffsetX = 10;			//不带px
	 	oGC.shadowOffsetY = 10;
	 	oGC.shadowColor = '#45cbff';

	 	oGC.shadowBlur = 4;

		oGC.fillText('妙味课堂', (oC.width - w)/2, (oC.height - 60)/2);
	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>